<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <title>马上贷</title>
    <script src="lib-flexible/build/flexible.js"></script>
    <script src="lib-flexible/build/flexible_css.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="font_gacpbu65edk/iconfont.css">
    <link rel="stylesheet" href="c-mashangdai.css">
</head>

<body>
    <div id="c-box">
        <div class="c-content">
            <div class="c-content-center">
                <input type="text" placeholder="请输入手机号码" id="phone">
                <input type="text" placeholder="请输入图形验证码" id="phones">
                <a href="#" id="changeImg">
                    <canvas class="show-captcha" id="canvas" width="100" height="40"></canvas>
                </a>
                <input type="text" placeholder="请输入短信验证码" class="duanxin">
                <span class="msgs">获取短信验证码</span>
                <button id="liji">立即获取</button>
                <div class="c-info">
                    *点击立即获取即表示同意《马上贷注册服务协议》 和《隐私政策》
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function() {
        var validCode = true;
        $(".msgs").click(function() {
            var time = 30;
            var code = $(this);
            if (validCode) {
                validCode = false;
                code.addClass("msgs1");
                var t = setInterval(function() {
                    time--;
                    code.html(time + "秒");
                    if (time == 0) {
                        clearInterval(t);
                        code.html("重新获取");
                        validCode = true;
                        code.removeClass("msgs1");
                    }
                }, 1000)
            }
        })
    })

    jQuery(function($) {
        function randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        }

        function randomColor(min, max) {
            var r = randomNum(min, max);
            var g = randomNum(min, max);
            var b = randomNum(min, max);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        var code = drawPic();
        document.getElementById("changeImg").onclick = function(e) {
            e.preventDefault();
            code = drawPic();
        }

        function drawPic() {
            var canvas = document.getElementById("canvas");
            var width = canvas.width;
            var height = canvas.height;

            var ctx = canvas.getContext('2d');
            ctx.textBaseline = 'bottom';

            ctx.fillStyle = randomColor(180, 240);

            ctx.fillRect(0, 0, width, height);

            var str = 'ABCEFGHJKLMNPQRSTWXY123456789';　　　　
            var code = "";　　　　　
            for (var i = 1; i <= 4; i++) {
                var txt = str[randomNum(0, str.length)];
                code = code + txt;
                ctx.fillStyle = randomColor(50, 160);

                ctx.font = randomNum(15, 40) + 'px SimHei';

                var x = 10 + i * 25;
                var y = randomNum(25, 35);
                var deg = randomNum(-45, 45);

                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(txt, 0, 0);

                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
            }

            for (var i = 0; i < 3; i++) {
                ctx.strokeStyle = randomColor(40, 180);
                ctx.beginPath();
                ctx.moveTo(randomNum(0, width / 2), randomNum(0, height / 2));
                ctx.lineTo(randomNum(0, width / 2), randomNum(0, height));
                ctx.stroke();
            }
            for (var i = 0; i < 50; i++) {
                ctx.fillStyle = randomColor(255);
                ctx.beginPath();
                ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
                ctx.fill();
            }
            return code;
        }
    });
</script>

</html>